<!DOCTYPE html>
<html lang="zh-CN">
<head>

<#include "bases/global_style.ftl">
<#include "bases/global_js.ftl">
<#include "bases/combo.ftl">

<script>
	var curent_page=${currentpage};

	var addformv,editformv;
	jQuery(document).ready(function()
	{
		var optInit = getOptionsFromForm();
		$("#Pagination").pagination(${totalRecord}, optInit);
		App.init();

		addformv=$("#addForm").validate({
        	debug:false //只验证不提交表单
    	});
    	editformv=$("#editForm").validate({
        	debug:false //只验证不提交表单
    	});
	});

	function pageselectCallback(page_index, jq)
	{
    	if (curent_page != page_index)
    	{
        	$("#currentpage").val(page_index);
        	$("#searchform").submit();
        	return true;
    	}
	}

	function showEditDiv(id)
	{
		$.ajax({
    		type : "POST",
    		url : CONTEXT+'/get_cartype_by_id?id='+id,
    		dataType : "json",  
  	        cache : false,  
  	        async : false,
  	      	success : function(data) {
  	      		var url="${base}/checkNameUnique?category=CarTypeName&where=and del=0 and id<>"+data.id;
  	      		$("#editDiv #editId").val(data.id);
  	      		$("#editDiv #editName").val(data.name);
  	      		$("#editDiv #editName").attr("data-rule-remote",url);
  	      		$("#editDiv #editBattery").val(data.battery_num);
  	      		$("#editDiv #editSeat").val(data.seat_num);
  	      		$("#editDiv #editPrice").val(data.unitprice);
  	      		showPopup("editDiv");
  	      	}
		});
	}

	function addEntity()
	{
		addformv.form();
   		if(addformv.valid()){
   			$("#addForm").submit();
	   	}
	}
	
	function updateTable()
	{
		editformv.form();
   		if(editformv.valid()){
   			$("#editForm").submit();
	   	}
	}

	function showPopup(div) 
	{//弹出层
    	var backDiv = document.getElementById("backDiv");
    	backDiv.style.top = "0%";//设置弹出层距离上边界的距离
    	backDiv.style.left = "0%";//设置弹出层距离左边界的距离
    	backDiv.style.width = "100%";//设置弹出层的宽度
    	backDiv.style.height = "100%";//设置弹出层的高度
    	backDiv.style.visibility = "visible";

    	var addDiv = document.getElementById(div);
    	addDiv.style.top = "10%";//设置弹出层距离上边界的距离
    	addDiv.style.left = "30%";//设置弹出层距离左边界的距离
    	addDiv.style.width = "40%";//设置弹出层的宽度
    	addDiv.style.height = "auto";//设置弹出层的高度
    	addDiv.style.visibility = "visible";

	}

	function hideEditTable() 
    {//关闭层
    	addformv.resetForm();
        var backDiv = document.getElementById("backDiv");
        backDiv.style.visibility = "hidden";

        var addDiv = document.getElementById("addDiv");
        addDiv.style.visibility = "hidden";

    }

	function hidePopup() 
    {//关闭层

        // resetLabel();
        var backDiv = document.getElementById("backDiv");
        backDiv.style.visibility = "hidden";

        var addDiv = document.getElementById("addDiv");
        addDiv.style.visibility = "hidden";

        var editDiv = document.getElementById("editDiv");
        editDiv.style.visibility = "hidden";
    }

	function allDivHide() 
    {
        hidePopup();
        hideEditTable();
    }

	function fresh()
    {
    	location.href='${base}/car_type_manage';
    }
</script>
</head>

<body>

	<div id="backDiv" onclick="allDivHide()" style="position: absolute;visibility: hidden;position:fixed;overflow: hidden;solid: #000000;background-color: #000000;padding: 1px;z-index: 99;filter:alpha(opacity=50);opacity: 0.5;"></div>
	
	<!-- 新增车型 -->
	<div id="addDiv" class="row-fluid" style="position: absolute;visibility: hidden;overflow: hidden;padding: 1px;z-index: 100;background-color: #FFFFFF;">
		<div class="span12">
        <div class="portlet box green" style="padding: 0px;margin:0px;">
            <div class="portlet-title">
                <div class="caption"><i class="fa fa-edit"></i>新增车型</div>
                <a href="javascript:hideEditTable();" class="remove"></a>
            </div>
            
            <div class="portlet-body flip-scroll">
            	<form id="addForm" action="<@spring.url '/add_cartype'></@spring.url>" method="POST">
            		<table class="table-bordered table-striped table-condensed flip-content">
            			<tbody role="alert" aria-live="polite" aria-relevant="all">
            				<tr class="even">
                				<td style="text-align: right;">车型名称<span class="fill-must">*</span></td>
                            	<td class="even">
                                   	<input class="m-wrap span8" style="margin-top: 10px" type="text" id="addName" name="name" placeholder="请输入车型名称" required data-rule-remote="${base}/checkNameUnique?category=CarTypeName&where=and del=0" data-msg-remote="车型已存在"/>
                            	</td>
                			</tr>
                			<tr class="even">
                				<td style="text-align: right;">电池数量<span class="fill-must">*</span></td>
                				<td class="even">
                					<input class="m-wrap span8" style="margin-top: 10px" type="number" id="addBattery" name="battery_num" placeholder="请输入电池数量" required/>
                				</td>
                			</tr>
                			<tr class="even">
                				<td style="text-align: right;">座位数量</td>
                				<td class="even">
                					<input class="m-wrap span8" style="margin-top: 10px" type="number" id="addSeat" name="seat_num" placeholder="请输入座位数量"/>
                				</td>
                			</tr>
                			<tr class="even">
                				<td style="text-align: right;">工人换电单价</td>
                				<td class="even">
                					<input class="m-wrap span8" style="margin-top: 10px" type="number" id="addPrice" name="unitprice" placeholder="请输入工人换电单价"/>
                				</td>
                			</tr>
            			</tbody>
            		</table>
            		<div class="controls controls-row" style="text-align: right;">
                        <input type="button" value="保存" class="btn green" onclick="addEntity()"/>
                        <input type="button" value="取消" class="btn green" onclick="allDivHide()" />
                    </div>
            	</form>
            </div>
        </div>
        </div>
	</div>
	
	<!-- 编辑车型 -->
	<div id="editDiv" class="row-fluid" style="position: absolute;visibility: hidden;overflow: hidden;padding: 1px;z-index: 100;background-color: #FFFFFF;">
		<div class="span12">
        <div class="portlet box green" style="margin: -1px;">
            <div class="portlet-title">
                <div class="caption"><i class="icon-edit"></i>编辑车型</div>
                <a href="javascript:hideEditTable();" class="remove"></a>
            </div>
            
            <div class="portlet-body flip-scroll">
            	<form id="editForm" action="<@spring.url '/edit_cartype'></@spring.url>" method="POST">
            		<table class="table-bordered table-striped table-condensed flip-content">
            			<tbody role="alert" aria-live="polite" aria-relevant="all">
            			<input type="hidden" id="editId" name="id"/>
            				<tr class="even">
                				<td style="text-align: right;">车型名称<span class="fill-must">*</span></td>
                            	<td class="even">
                                   	<input class="m-wrap span8" style="margin-top: 10px" type="text" id="editName" name="name" placeholder="请输入车型名称" required data-rule-remote="${base}/checkNameUnique?category=CarTypeName&where=and del=0" data-msg-remote="车型已存在" onkeyup="editformv.form();"/>
                            	</td>
                			</tr>
                			<tr class="even">
                				<td style="text-align: right;">电池数量<span class="fill-must">*</span></td>
                				<td class="even">
                					<input class="m-wrap span8" style="margin-top: 10px" type="number" id="editBattery" name="battery_num" placeholder="请输入电池数量" required/>
                				</td>
                			</tr>
                			<tr class="even">
                				<td style="text-align: right;">座位数量</td>
                				<td class="even">
                					<input class="m-wrap span8" style="margin-top: 10px" type="number" id="editSeat" name="seat_num" placeholder="请输入座位数量"/>
                				</td>
                			</tr>
                			<tr class="even">
                				<td style="text-align: right;">工人换电单价</td>
                				<td class="even">
                					<input class="m-wrap span8" style="margin-top: 10px" type="number" id="editPrice" name="unitprice" placeholder="请输入工人换电单价"/>
                				</td>
                			</tr>
            			</tbody>
            		</table>
            		<div class="controls controls-row" style="text-align: right;">
                        <input type="button" value="保存" class="btn green" onclick="updateTable()"/>
                        <input type="button" value="取消" class="btn green" onclick="fresh()" />
                    </div>
            	</form>
            </div>
        </div>
        </div>
	</div>
<#include "bases/navhead.ftl">
<#include "bases/sidebar.ftl">

	<div class="page-container secMenu-content">    

     
        <div class="page-content">
     
            <div class="container-fluid">

                <div class="row-fluid">
                    <div class="span12">
                        <div class="portlet box green">
                            <div class="portlet-title">
                                <div class="caption"><i class="fa fa-cogs"></i>车型管理</div>
	                            <div class="tools">
	                                <a href="javascript:window.location.reload()" class="reload"></a>
	                            </div>
                            </div>
                            
                            <div class="portlet-body flip-scroll">
                            	<form id="searchform" action="<@spring.url '/car_type_manage'></@spring.url>" method="POST">
                            		<input  type="hidden" id="currentpage" name="page" value="0" />
                            		<input  type="hidden" id="postactionorder" name="postactionorder" />
                            		
                            		<div class="controls controls-row">
                            			<button type="button" class="btn green" onclick="showPopup('addDiv')"><i class="fa fa-plus"></i>新增车型</button>
                            		</div>
                            		
                            		<table  class="table table-bordered table-hover table-striped table-condensed list-table">
                            			<thead class="flip-content">
                            				<tr>
	          									<th style="text-align: center;">车型名称</th>
	          									<th style="text-align: center;">电池数量</th>
	          									<th style="text-align: center;">座位数量</th>
	          									<th style="text-align: center;">工人换电单价</th>
	          									<th style="text-align: center;width: 180px">操作</th>
	          								</tr>
                            			</thead>
                            			<tbody>
                            			<#list cartype_t as ctt>
                            				<tr>
                            					<#if ctt?exists>
	      								 		<td style="text-align: center;"><#if ctt.getName()?exists>${ctt.getName()}</#if></td>
	      								 		<td style="text-align: center;"><#if ctt.getBattery_num()?exists>${ctt.getBattery_num()}</#if></td>
	      								 		<td style="text-align: center;"><#if ctt.getSeat_num()?exists>${ctt.getSeat_num()}</#if></td>
	      								 		<td style="text-align: center;"><#if ctt.getUnitprice()?exists>${ctt.getUnitprice()}</#if></td>
	      								 		<td style="text-align: center;">
	      								 			<a id="editButton" onclick="showEditDiv('${ctt.getId()}');" class="bianji">编辑</a>
	      								 		</td>
	      								 		</#if>
                            				</tr>
                            			</#list>
                            			</tbody>
                            		</table>
                            		<div class="controls controls-row">
                                    	<div id="Pagination" class="pagination"></div>
                                    </div>
                            	</form>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            
        </div>
        
    </div>
</body>